<template>
    <div>
        <div class="Header"><Header/></div>
        <van-search
  v-model="value"
  show-action
  placeholder="请输入您想查询的订单"
  @search="getOrderByStatus()"
>
<template #action>
    <div @click="getOrderByStatus()">搜索</div>
  </template>
</van-search>


        <van-tabs v-model:active="active"  animated @click-tab="getOrderByStatus()" >
  <van-tab title="全部" >
    <div class="qb" v-for="o in order" :key="o.orderid" >
        <div class="t">
            <span>{{o.orderName}} ></span> <h5 v-if="o.orderStatus==0">未接单</h5> <h5 v-if="o.orderStatus==1">正在进行</h5><h5 v-if="o.orderStatus==2">已完成</h5><h5 v-if="o.orderStatus==3">异常</h5>
        </div>
        <div class="center">
            <img :src="o.img">
            <div class="zb">
                <h2>{{o.detailAddress}}</h2>
                <h3>帮手:{{o.bname}}</h3>
            </div>
            <h5>¥{{o.price}}</h5>
            <h6 v-if="o.orderStatus==0" @click="bj(o.orderid)">编辑</h6><h6 v-if="o.orderStatus==1" @click="lxbs(o.orderid)">联系帮手</h6><h6 v-if="o.orderStatus==2" @click="lxbs(o.orderid)">联系帮手</h6><h6 v-if="o.orderStatus==3" @click="lxgl(o.orderid)">联系管理</h6>
            <h4 v-if="o.orderStatus==0" @click="sc(o.orderid)">删除</h4><h4 v-if="o.orderStatus==1" @click="sc(o.orderid)">取消</h4><h4 v-if="o.orderStatus==2" @click="ss(o.orderid)">申述</h4><h4 v-if="o.orderStatus==3" @click="wc(o.orderid)">完成</h4>
        </div>
        
    </div>
  </van-tab>
  <van-tab title="待接单">
     <div class="qb" v-for="o in order" :key="o.orderid" >
        <div class="t">
            <span>{{o.orderName}} ></span> <h5 v-if="o.orderStatus==0">未接单</h5> <h5 v-if="o.orderStatus==1">正在进行</h5><h5 v-if="o.orderStatus==2">已完成</h5><h5 v-if="o.orderStatus==3">异常</h5>
        </div>
        <div class="center">
            <img :src="o.img">
            <div class="zb">
                <h2>{{o.detailAddress}}</h2>
                <h3>帮手:{{o.bname}}</h3>
            </div>
            <h5>¥{{o.price}}</h5>
                        <h6 v-if="o.orderStatus==0" @click="bj(o.orderid)">编辑</h6><h6 v-if="o.orderStatus==1" @click="lxbs(o.orderid)">联系帮手</h6><h6 v-if="o.orderStatus==2" @click="lxbs(o.orderid)">联系帮手</h6><h6 v-if="o.orderStatus==3" @click="lxgl(o.orderid)">联系管理</h6>
            <h4 v-if="o.orderStatus==0" @click="sc(o.orderid)">删除</h4><h4 v-if="o.orderStatus==1" @click="sc(o.orderid)">取消</h4><h4 v-if="o.orderStatus==2" @click="ss(o.orderid)">申述</h4><h4 v-if="o.orderStatus==3" @click="wc(o.orderid)">完成</h4>
        </div>
    </div>
  </van-tab>
  <van-tab title="已接单">
    <div class="qb" v-for="o in order" :key="o.orderid" >
        <div class="t">
            <span>{{o.orderName}} ></span> <h5 v-if="o.orderStatus==0">未接单</h5> <h5 v-if="o.orderStatus==1">正在进行</h5><h5 v-if="o.orderStatus==2">已完成</h5><h5 v-if="o.orderStatus==3">异常</h5>
        </div>
        <div class="center">
            <img :src="o.img">
            <div class="zb">
                <h2>{{o.detailAddress}}</h2>
                <h3>帮手:{{o.bname}}</h3>
            </div>
            <h5>¥{{o.price}}</h5>
                        <h6 v-if="o.orderStatus==0" @click="bj(o.orderid)">编辑</h6><h6 v-if="o.orderStatus==1" @click="lxbs(o.orderid)">联系帮手</h6><h6 v-if="o.orderStatus==2" @click="lxbs(o.orderid)">联系帮手</h6><h6 v-if="o.orderStatus==3" @click="lxgl(o.orderid)">联系管理</h6>
            <h4 v-if="o.orderStatus==0" @click="sc(o.orderid)">删除</h4><h4 v-if="o.orderStatus==1" @click="sc(o.orderid)">取消</h4><h4 v-if="o.orderStatus==2" @click="ss(o.orderid)">申述</h4><h4 v-if="o.orderStatus==3" @click="wc(o.orderid)">完成</h4>
        </div>
    </div>
  </van-tab>
  <van-tab title="已完成">
    <div class="qb" v-for="o in order" :key="o.orderid" >
        <div class="t">
            <span>{{o.orderName}} ></span> <h5 v-if="o.orderStatus==0">未接单</h5> <h5 v-if="o.orderStatus==1">正在进行</h5><h5 v-if="o.orderStatus==2">已完成</h5><h5 v-if="o.orderStatus==3">异常</h5>
        </div>
        <div class="center">
            <img :src="o.img">
            <div class="zb">
                <h2>{{o.detailAddress}}</h2>nn
                <h3>帮手:{{o.bname}}</h3>
            </div>
            <h5>¥{{o.price}}</h5>
                        <h6 v-if="o.orderStatus==0" @click="bj(o.orderid)">编辑</h6><h6 v-if="o.orderStatus==1" @click="lxbs(o.orderid)">联系帮手</h6><h6 v-if="o.orderStatus==2" @click="lxbs(o.orderid)">联系帮手</h6><h6 v-if="o.orderStatus==3" @click="lxgl(o.orderid)">联系管理</h6>
            <h4 v-if="o.orderStatus==0" @click="sc(o.orderid)">删除</h4><h4 v-if="o.orderStatus==1" @click="sc(o.orderid)">取消</h4><h4 v-if="o.orderStatus==2" @click="ss(o.orderid)">申述</h4><h4 v-if="o.orderStatus==3" @click="wc(o.orderid)">完成</h4>
        </div>
    </div>
  </van-tab>
    <van-tab title="异常">
        <div class="qb" v-for="o in order" :key="o.orderid" >
        <div class="t">
            <span>{{o.orderName}} ></span> <h5 v-if="o.orderStatus==0">未接单</h5> <h5 v-if="o.orderStatus==1">正在进行</h5><h5 v-if="o.orderStatus==2">已完成</h5><h5 v-if="o.orderStatus==3">异常</h5>
        </div>
        <div class="center">
            <img :src="o.img">
            <div class="zb">
                <h2>{{o.detailAddress}}</h2>
                <h3>帮手:{{o.bname}}</h3>
            </div>
            <h5>¥{{o.price}}</h5>
                        <h6 v-if="o.orderStatus==0" @click="bj(o.orderid)">编辑</h6><h6 v-if="o.orderStatus==1" @click="lxbs(o.orderid)">联系帮手</h6><h6 v-if="o.orderStatus==2" @click="lxbs(o.orderid)">联系帮手</h6><h6 v-if="o.orderStatus==3" @click="lxgl(o.orderid)">联系管理</h6>
            <h4 v-if="o.orderStatus==0" @click="sc(o.orderid)">删除</h4><h4 v-if="o.orderStatus==1" @click="sc(o.orderid)">取消</h4><h4 v-if="o.orderStatus==2" @click="ss(o.orderid)">申述</h4><h4 v-if="o.orderStatus==3" @click="wc(o.orderid)">完成</h4>
        </div>
    </div>
    </van-tab>
</van-tabs>

  <van-pagination
      @click="getOrderByStatus()"
  v-model="currentPage"
  :total-items="125"
  :show-page-size="3"
  force-ellipses/>

    </div>
</template>

<script>
import { ref } from 'vue';
import Header from '@/components/Header.vue';
import { ElMessage } from "element-plus";
import { showDialog } from 'vant';
    export default {
         setup() {
    const active = ref(0);
        const currentPage = ref(1);
    return { active,currentPage };
  },
         components: {Header },
         data(){
            return{
                order:[],
                value:"",
                username:sessionStorage.getItem("name"),
                bname:"",
            }
         },
         mounted(){
                    this.getOrderByStatus();
    },
        methods:{
            getOrderByStatus(){
const dqy=(this.currentPage-1)*10;
      const gs=10;
  console.log("页数："+this.currentPage);
   this.axios({
              method: "get",
              url:"/api/order/pagestatus",
             params:{
                pageNum:dqy,
                pageSize:gs,
                orderStatus:this.active,
                username:this.username,
                orderName:this.value,
             }
            })
            .then(
                (response)=>{                  
                    this.order = response.data.data;
                    console.log(this.order);
                      if(this.order[0]==undefined){ 
                    ElMessage("没有这么多任务啦！！");

      }
                });
            },

            bj(orderid){
                this.$router.push({path:"/uporder",query:{orderid:orderid}})
            },
            sc(orderid){
                this.axios({
                    method:"post",
                    url:"/api/order/delete",
                    params:{
                        orderid:orderid,
                    }
                })
                .then(
                ()=>{                  
                    ElMessage("删除成功");
                     this.getOrderByStatus()
  
                });
            },
            lxbs(orderid){
                 this.axios({
                    method:"get",
                    url:"/api/order/byid",
                    params:{
                        orderid:orderid,
                    }
                })
                .then(
                (r)=>{                  
                     this.bname=r.data.data[0].bname;
                     console.log("bname:",this.bname)


                     /////////
                     this.axios({
                    method:"get",
                    url:"/api/user/qt",
                    params:{
                        username:this.bname,
                    }
                })
                .then(
                (r)=>{                  
                     console.log("btel:",r.data.data[0].userTel)
                    //  alert("帮手电话:"+r.data.data[0].userTel);
                     showDialog({
                     message: "帮手电话:"+r.data.data[0].userTel,
                     theme: 'round-button',
})
  
                });
                });
            },
            ss(orderid){
                this.$router.push({path:"/yhss",query:{orderid:orderid}})
            },
            lxgl(orderid){ 
                    showDialog({
                     message: "您的订单编号是："+orderid+"\n"+"管理员的电话为:18878950480",
                     theme: 'round-button',
})
            },
            wc(orderid){
               let url = "/api/order/update";
                  this.axios({
                    method:"post",
                    url:url,
                    params:{
                      orderStatus:2,
                      orderid: orderid,
                    }
                  }).then(
                ()=>{ 
                  ElMessage("订单完成！");
                    this.getOrderByStatus()
                }).catch(
                  ()=>{
                    ElMessage("订单完成失败！");
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
.qb{
    background-color: rgb(243, 243, 243);
    margin-top: 20px;
}
.t{
    display: flex;
      position: relative;
}
.t span{
     margin: 10px 20px;
      
}
.t h5{
    background-color: rgb(182, 190, 219);
    color: rgb(224, 72, 41);
    position:absolute;
    right: 10px;
    top: -10px;
}
.center{
    display: flex;
       position: relative;
}
.center img{
    width: 100px;
    margin: 10px 20px;
    border-radius: 10px;

}
.center h6{
    position:absolute;
    font-size: 15px;
    right: 60px;
    top: 20px;
    color: blue;
}
.center h4{
    position:absolute;
    font-size: 15px;
     right: 15px;
    top: 35px;
    color: red;
}
.zb h2{
    font-size: 15px;
      overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin-right: 50px;
}
.zb h3{
    color: rgb(221, 163, 163);
}
.center h5{
position:absolute;
right: 10px;
top: -5px;
color: rgb(225, 30, 30);
}
</style>